<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>用户登录界面</title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/login/css/signin.css}" rel="stylesheet">
    <script th:src="@{/login/jquery-3.4.1.min.js}"></script>
</head>
<body class="text-center">

<!--  表单 -->
<form class="form-signin" action="/logintel" method="post" >
    <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录</h1>
    <input type="text" class="form-control" name="username"
           th:text="#{login.username}" th:placeholder="用户名" required="" autofocus="">
    <input type="password" class="form-control" name="password"
           th:text="#{login.password}" th:placeholder="密码" required="">
    <input type="tel" class="form-control" id="telNumber" name="tele"
           th:text="手机号" th:placeholder="手机号" required="">
    <input type="code" class="form-control" id="telCode" name="code"
           th:text="验证码" th:placeholder="验证码" required="">
    <button id="getTelCode">获取验证码</button>
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}">登录</button>
    <p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018</span>-<span
            th:text="${currentYear}+1">2019</span></p>

    <a class="btn btn-sm" th:href="@{/toLoginPage(l='zh_CN')}">中文</a>
    <a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">English</a>
    <div>
        <!--登录失败的错误提示信息-->
        <span th:text="${msg}"></span>
    </div>

</form>
</body>

<script>
    $(function () {
        $("#getTelCode").click(function () {
            var telNumber=$("#telNumber").val()
            $.ajax({
                type: "GET",
                url: "/sms/",
                traditional: true,//数组类型参数传递：
                data: {
                    tele: telNumber
                },
                success: function (data) {
                    console.log("验证码发出去了")
                },
                error: function (e) {
                    console.log("ERROR: ", e);
                }
            });
        })
    })





</script>

</html>
